<template>
    <div class="wh100p pos-r overflow-h">
        <div class="wh100p" ref="wrapper" style="">
            <div class="" :style="contentStyle">
                <div class="pull-down-container flex-box flex-center-all"
                     v-if="pullDown"
                     style="color: #939393">
                    <div class="flex-box flex-center" v-if="pullDownStatus === 0">
                        <div class="mr-xs" style="font-size: 1.3em;">
                            <i class="van-icon van-icon-passed" style="margin-top: 7px;"></i>
                        </div>
                        <div class="">加载完成</div>
                    </div>
                    <div class="flex-box flex-center" v-else-if="pullDownStatus === 3">
                        <van-loading size="20"></van-loading>
                    </div>
                    <div class="flex-box flex-center" v-else>
                        <div class="trans mr-sm" style="font-size: 1.3em;margin-top: 2px"
                             :class="[pullDownStatus === 1 ? '' : 'transform-180deg']"
                        >
                            <div class="iconfont icon-arrow-down"></div>
                        </div>
                        <div class="" v-if="pullDownStatus===1">下拉刷新</div>
                        <div class="" v-else>松开刷新</div>
                    </div>
                </div>
                <div class="">
                    <slot></slot>
                </div>
                <div class="flex-box flex-center-all" style="height:40px" v-if="pullUp">
                    <div class="flex-box flex-center" v-if="pullUpStatus === 1">
                        <div class="mr-xs" style="margin-top: 3px;">
                            <van-loading type="spinner" size="14"></van-loading>
                        </div>
                        <div class="">加载中</div>
                    </div>
                    <div class="flex-box flex-center" v-else-if="pullUpStatus === 0">
                        <div class="">没有更多了</div>
                    </div>
                    <div class="flex-box flex-center" v-else-if="0 && pullUpStatus === 2">
                        <div class="mr-xs" style="font-size: 1.3em;">
                            <i class="van-icon van-icon-passed" style="margin-top: 7px;"></i>
                        </div>
                        <div class="">加载完成</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import BScroll from "better-scroll";
    import {NavigateMixin} from "@/mixin/navigate.mixin";

    export default {
        name: 'ezm-scroll-box',
        mixins: [NavigateMixin],
        components: {},
        props: {
            pullDown: {
                default: false,
            },
            pullUp: {
                default: false,
            },
            paginate: {
                default: null
            },
            scrollOptions: {
                default: () => ({})
            }
        },
        data() {
            return {
                NAV_INIT_DELAY: 0,
                scroll: null,
                contentHeight: 'auto',
                lastScrollY: 0,
                // 下拉状态 0:完成，1：下拉刷新，2：松开刷新，3：加载中，
                pullDownStatus: -1,
                // 上拉状态：0：没有更多了，1：加载中， 2：加载完成
                pullUpStatus: -1,
                computedPullDownDisabled: false,
            }
        },
        computed: {
            contentStyle() {
                return {
                    'min-height': this.contentHeight,
                }
            },
            pullDownIconStyle() {
                return {
                    'transition': ''
                }
            }
        },
        watch: {},
        created() {
            if (this.paginate) this.paginate.scrollInstance = this;
        },
        mounted() {
            this.initScroll();
        },
        destroyed() {
        },
        methods: {
            initScroll() {
                if (this.scroll) return;
                this.scroll = new BScroll(this.$refs.wrapper, Object.assign({
                    scrollY: true,
                    click: true,
                }, {
                    pullDownRefresh: this.pullDown ? {
                        threshold: 80,
                        stop: 60
                    } : false,
                    pullUpLoad: this.pullUp ? {
                        threshold: 50
                    } : false,
                    bounce: {
                        top: true,
                        bottom: true,
                        left: true,
                        right: true
                    }
                }, this.scrollOptions));
                this.contentHeight = this.$refs.wrapper.offsetHeight + 1 + 'px';
                this.$nextTick(() => {
                    this.scroll.refresh();
                });
                this.scroll.on('scroll', ({y}) => {
                    this.lastScrollY = y;
                    this.computePullDown(y);
                });
                this.scroll.on('pullingDown', () => {
                    this.pullDownStatus = 3;
                    if (this.paginate) this.paginate.fetchRefreshList();
                    if (this.pullUp) {
                        this.scroll.closePullUp();
                        this.scroll.openPullUp();
                    }
                });
                this.scroll.on('pullingUp', () => {
                    this.pullUpStatus = 1;
                    if (this.paginate) this.paginate.fetchMoreNextPage();
                });
            },

            computePullDown(y) {
                if (this.scroll.movingDirectionY && this.pullDownStatus !== 3 && !this.computedPullDownDisabled) {
                    if (y > 80) this.pullDownStatus = 2;
                    else this.pullDownStatus = 1;
                }
            },

            finishPullDown() {
                if (!this.pullDown) return;
                this.pullDownStatus = 0;
                this.computedPullDownDisabled = true;
                setTimeout(() => this.computedPullDownDisabled = false, 400);
                this.scroll.finishPullDown();
            },

            finishPullUp(noMore = false) {
                if (!this.pullUp) return;
                this.pullUpStatus = noMore ? 0 : 2;
                if (noMore) {
                    this.scroll.closePullUp();
                } else this.scroll.finishPullUp();
            },
            init() {
                if (!this.scroll) return;
                this.scroll.scrollTo(0, 0, 0);
            },
            autoPullDown() {
                this.pullDownStatus = 3;
                this.scroll.scrollTo(0, 80, 400);
                setTimeout(() => {
                    this.scroll.autoPullDownRefresh();
                }, 380);
            },
            backInit() {
                if (!this.scroll) return;
                this.scroll.scrollTo(0, this.lastScrollY || 0, 0);
            }
        }
    };
</script>

<style lang="less" scoped>

    .pull-down-container {
        height: 60px;
        top: -60px;
        position: absolute;
        width: 100%;
    }

    .transform-180deg {
        transform: rotate(180deg);
    }

</style>